<template>
  <a-layout>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">

      <a-row>
        <a-col :span="6">
          <a-tree
              :tree-data="level"
              @select="onSelect"
              :field-names="{
                children: 'children',
                title: 'name',
                key: 'id',
              }"
          >
        </a-tree>
        </a-col>
        <a-col :span="18">
          <div>
            <h2>{{doc.name}}</h2>
            <span>阅读数：{{doc.viewCount}}</span>&nbsp;&nbsp;&nbsp;
            <span>点赞数：{{doc.voteCount}}</span>
          </div>
          <hr/>
          <div class="wangeditor" :innerHTML = valueHtml></div>
            <a-button type="primary" shape="round" size="large" @click="vote">
              点赞
            </a-button>
        </a-col>
      </a-row>

    </a-layout-content>
  </a-layout>
</template>

<script>
import{EditOutlined, DeleteOutlined} from '@ant-design/icons-vue';
import axios from "axios";
import {onBeforeUnmount,ref,shallowRef,onMounted } from "vue"
import { message } from 'ant-design-vue'
import {arrayToTree,isEmpty} from "@/util/Tool";
import {useRoute} from "vue-router";
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar,} from '@wangeditor/editor-for-vue'


export default {
  name: "Doc",
  setup(){
    const rou = useRoute()
    const level = ref();
    const treeData = ref({})
    const valueHtml = ref('')
    const doc = ref({})

    onMounted(()=>{
      console.log("onMounted AdminDoc")
      load()

    })

    function load() {
      console.log("load...")

      axios.get("api/docList/"+rou.query.ebookId,)
          .then(res => {
            console.log(res)
            if(res.data.code === "200"){
              level.value = arrayToTree(res.data.data,0)

              treeData.value = JSON.parse(JSON.stringify(level.value))
              setDisabled(treeData.value,0)
              treeData.value.unshift({id:0,name:'无'})
              if(!isEmpty(level.value)){
                loadDocContent(level.value[0].id)
                doc.value = res.data.data[0]
              }

            }else{
              message.error(res.data.msg);
            }
          })
    }

    const loadDocContent=(id)=>{
      axios.get('api/docContent/'+id)
          .then(res => {
            if(res.data.code === "200"){
              valueHtml.value = res.data.data
              message.success(res.data.msg);
            }else{
              message.error(res.data.msg);
            }
          })
    }

    const onSelect=(selectedKeys, e)=>{
      valueHtml.value=''

      doc.value = e.selectedNodes[0]
      loadDocContent(selectedKeys[0])
    }

    const setDisabled = (data,id) =>{
      for(let i=0;i<data.length;i++){
        const d = data[i];
        if(d.id === id){
          d.disabled = true

          //  遍历子文档
          const child = d.children
          if(!isEmpty(child)){
            for(let j =0;j<child.length;j++){
              setDisabled(child,child[j].id)
            }
          }
        }else{
          const child = d.children
          if(!isEmpty(child)){
            setDisabled(child,id)
          }
        }
      }
    }

    const vote=()=>{
      console.log("vote")
      axios.get('api/doc/vote/'+doc.value.id)
          .then(res => {
            if(res.data.code === "200"){
              message.success(res.data.msg);
            }else{
              message.error(res.data.msg);
            }
          })
    }




    return{
      level,
      treeData,
      valueHtml,
      doc,
      load,
      loadDocContent,
      onSelect,
      setDisabled,
      vote
    }
  }
}
</script>

<style scoped>

</style>